<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>perspective和transform-style</title>
		<style>
			.box{
				background-color: cornflowerblue;
				height: 1000px;
				border: 3px solid rosybrown;
				-webkit-perspective: 10000;
				transition: all 1s;
			}
			.box img{
				
				/*transform-origin: bottom;*/
				transform: rotateX(120deg) rotateY(130deg) rotateZ(150deg);
				transform-style: preserve-3d;
				transition: all 1s;
			}
			.box:hover img{
				/*-webkit-perspective: 100;*/
				transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
			}
		</style>
	</head>
	<body>
		<h2>1.transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。</h2>
		<p>他主要有两个属性值：flat和preserve-3d。其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。</p>
		<h2>2.perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上</h2>
		<p>上面的描述可能让人难以理解一些，其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。</p>
	
	
		<div class="box">
			<img src="img/踏雪千寻.jpg" alt="" />
		</div>
	</body>
</html>
